<template>
  <div class="my-operation" >
    <a @tap="onShare"><i class="iconfont icon-fenxiang"></i><span>分享</span></a>
    <a @tap="onComment"><i class="iconfont icon-pinglun"></i><span >{{article.comment_count > 0 ? article.comment_count : '评论'}}</span></a>
    <a @tap="onLike"><i class="iconfont " :class="[isLike ? 'icon-dianzan_kuai' : 'icon-dianzan']"></i><span >{{article.like_count >0 ? article.like_count : '赞'}}</span></a>
    <a @tap="onCollect">
      <i class="iconfont " :class="[isCollect ? 'icon-shoucang1' : 'icon-shoucang']">
      </i><span>{{isCollect ? '已收藏' : '收藏'}}</span></a>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import bus from '@/utils/bus'
  import { addArticleLikings,deleteArticleLikings,addArticleCollections,deleteArticleCollections,getArticleCollectionsId,getArticleLikingsId} from '@/api/article'
export default {
  name: 'my-operation',
  components: {},
  props:{
    article:{
      type:Object
    }
  },
  data () {
    return {
      isCollect: false,
      isLike:false
    }
  },
  computed:{
    ...mapGetters(['userId','token'])
  },
  created () {

    this.getArticleCollectionsIdd(this.article.id)
    this.getArticleLikingsId(this.article.id)
  },
  methods: {
    //点击分享
    onShare () {
       bus.$emit('ontapShare')
    },
    onComment () {},
    // 点击点赞或取消点赞
    async onLike () {
      if(!this.token) return console.log('去登录');
      if(!this.isLike){
        const res = await addArticleLikings({article_id:this.article.id})
        if(!res)return console.log("已经点赞过文章了，发请求取消点赞文章");
        // console.log('点赞文章成功');
         this.isLike = true
         this.article.like_count = this.article.like_count+1
      }else{
        const re = await deleteArticleLikings(this.article.id)
        if(!re) return console.log("取消点赞文章失败");
        // console.log('取消点赞文章成功');
        this.isLike = false
        this.article.like_count = this.article.like_count-1
        }
    },
    // 判断当前是否收藏该文章
    async getArticleCollectionsIdd(id){
      if(!this.token) return console.log('去登录');
      const res = await getArticleCollectionsId(id)
      if(res){
        // console.log('当前状态已收藏');
        this.isCollect = true
      }else{
        // console.log('当前状态未收藏');
        this.isCollect = false
      }

    },
    // 判断当前是否点赞该文章
    async getArticleLikingsId(id){
       if(!this.token) return console.log('去登录');
      const res =  await getArticleLikingsId(id)
      if(res){
        // console.log('当前状态已点赞');
        this.isLike = true
      }else{
        // console.log('当前状态未点赞');
        this.isLike = false
      }
    },
    // 点击收藏或取消收藏
    async onCollect () {
      if(!this.token) return console.log('去登录');

      if(!this.isCollect){
      const res = await addArticleCollections({article_id:this.article.id})
      if(!res) return console.log('已经收藏过文章了，发请求取消收藏文章');
      // console.log('收藏文章成功');
      this.isCollect = true
      }else{
        const re = await deleteArticleCollections(this.article.id)
        if(!re) return console.log("取消收藏文章失败");
        // console.log('取消收藏文章成功');
        this.isCollect = false
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.my-operation {
  display: flex;
  justify-content: space-between;
  a {
    margin-right: 10px;
    width: 69px;
  }
  i {
    margin-right: 3px;
    font-size: 18px;
  }
  .icon-shoucang1,{
    color: rgb(236, 182, 73);
  }
  .icon-dianzan_kuai {
    color: red;
  }
  span {
    font-size: 14px;
  }
}
</style>
